<template>
	<view class="page">
		<!-- 内容区 -->
		<view class="padding-40 borderRadius-40 content-section">
			<view class="flex items-center">
				<image src="http://bbsf.oss-cn-shanghai.aliyuncs.com/english/my/readimage1.png" mode=""
					class="width-88 height-88" v-if="module_type == '阅读理解'">
				</image>
				<image src="http://bbsf.oss-cn-shanghai.aliyuncs.com/english/my/readimage2.png" mode=""
					class="width-88 height-88" v-if="module_type == '完形填空'">
				</image>
				<image src="http://bbsf.oss-cn-shanghai.aliyuncs.com/english/my/readimage3.png" mode=""
					class="width-88 height-88" v-if="module_type == '语篇填空'">
				</image>
				<image src="http://bbsf.oss-cn-shanghai.aliyuncs.com/english/my/readimage4.png" mode=""
					class="width-88 height-88" v-if="module_type == '大小作文'">
				</image>
				<view class="marginLeft-24">
					<view class="fontSize-32 weight-700">
						{{module_type}}模块， <br>是红旗老师个性化服务模块。
					</view>
				</view>

			</view>
			<view class="fontSize-30 color-333 marginTop-40">
				需要根据你的情况进行个性化学法指导，帮你快速突破学习瓶颈，您需要吗?
			</view>
			<!-- 价格区域 -->

			<view class="marginTop-72" v-if="isSure == true">
				<view class="fontSize-32 weight-700">
					为了突破这个模块，您愿意支付多少费用?
				</view>
				<view class="marginTop-50 flex space-between items-center">
					<view class=" height-256 padding-32 box-sizing colorBj-fff borderRadius-30 price-item"
						v-for="(item,index) in priceList" :key='index' @click='selectPrice(item,index)'
						:style="getStyle(index)">
						<view class="fontSize-44 color-51D580 text-center">
							¥{{item.price}}
						</view>
						<view class="fontSize-26 color-999 marginTop-50 text-center">
							{{item.title}}<br>个性化服务
						</view>

					</view>



				</view>
			</view>
			<!-- 联系方式区域 -->
			<view class="marginTop-80" v-if="isPhone == true">
				<view class="fontSize-32 weight-700">
					留下您的联系方式，会有您的专属老师给您提供定制服务!
				</view>
				<view style="margin: 0 auto;margin-top: 30rpx;">
					<up-input placeholder="请输入您的电话或微信号" border="surround" v-model="mobile"
						placeholderStyle="color: #999;font-size:28rpx;" fontSize='28rpx'></up-input>
				</view>
			</view>
		</view>
		<!-- 按钮区 -->
		<view class="btn-section flex space-between items-center">
			<view class="btn" @click='back' v-if="isSure == false">
				不需要
			</view>
			<view class="btn" style="background: #51D580;" @click='isSure = true' v-if="isSure == false">
				需要
			</view>
			<view class="btn btn2" @click='click' v-if="isSure == true">
				确定
			</view>
		</view>
		<!-- 弹窗 -->
		<up-popup :show="popupShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					温馨提示
				</view>
				<view class="text-center marginTop-100 fontSize-36 weight-700 color-333">
					我们已收到您的学习期望诉求， 稍后会有专属老师联系您为您定 制服务,不要漏接电话哟!祝您 早日成功!
				</view>

				<view class="padding-30 marginTop-50">
					<view class="btn-block" @click="toPage">
						知道了
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="tipsShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					温馨提示
				</view>
				<view class="text-center marginTop-100 fontSize-36 weight-700 color-333">
					您还未填写联系方式
				</view>

				<view class="padding-30 marginTop-50">
					<view class="btn-block" @click="tipsShow = false">
						知道了
					</view>
				</view>
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		inject,
		ref
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	const isSure = ref(false)
	const isPhone = ref(false)
	const popupShow = ref(false)
	const tipsShow = ref(false)
	const module_type = ref('')
	const selectedIndex = ref(0)
	const price = ref('')
	const mobile = ref('')
	const addWordscustomerApi = inject('addWordscustomer')


	const priceList = ref([{
			price: '199',
			title: '通用智能'
		},
		{
			price: '399',
			title: '专属智能'
		},
		{
			price: '999',
			title: '专属人工'
		},

	])
	onLoad((op) => {
		module_type.value = op.item
	})
	const back = () => {
		uni.navigateBack()
	}
	const click = () => {

		if (isPhone.value == false) {
			isPhone.value = true
		} else {
			addWordscustomerApi({
				module_type: module_type.value,
				price: price.value,
				mobile: mobile.value
			}).then(res => {
				if (res.status == 201) {
					tipsShow.value = true

				} else {
					popupShow.value = true
				}
			})
		}
	}
	const selectPrice = (item, index) => {
		price.value = item.price
		selectedIndex.value = index;
	}
	const getStyle = (index) => {
		if (index === selectedIndex.value) {
			return {
				border: '2rpx solid #51D580',

			};
		}
		return {};
	};
	const toPage = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	};
</script>

<style lang="scss">
	.page {
		padding: 30rpx;
		box-sizing: border-box;
	}



	.content-section {
		background-color: rgba(81, 213, 128, 0.08);
		padding-bottom: 100rpx;

	}

	@media (max-height: 800px) {
		.content-section {

			padding-bottom: 30rpx;

		}
	}

	.lineheight {
		line-height: 40rpx;
	}

	.btn-section {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 686rpx;

		.btn {
			width: 304rpx;
			height: 104rpx;
			line-height: 104rpx;
			background: #ccc;
			color: #fff;
			border-radius: 92rpx;
			text-align: center;
		}

		.btn.btn2 {
			width: 100%;
			height: 104rpx;
			line-height: 104rpx;
			background: #51D580;
		}
	}

	.price-item {
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		border: 2rpx solid transparent;
	}

	::v-deep .u-border {
		border: 2rpx solid #51D580 !important;
	}

	::v-deep .u-input {
		width: 598rpx;
		height: 92rpx !important;
		padding: 0 !important;
		padding-left: 20rpx !important;
	}

	::v-deep .u-radius {
		border-radius: 20rpx !important;
	}

	.popup_bg {
		width: 594rpx;
		height: 554rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		padding: 0 46rpx;

		.btn-block {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx;
			text-align: center;
			line-height: 92rpx;
			color: #fff;
		}

	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>